<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .myImg{margin: 0 auto;width:710px;height:360px;background: #fff;}
    </style>
</head>
<body>
    <a type="button" id="down_button"><button id="creat">点击合成图片</button></a>
    <div class="myImg" style="position:relative;">
        <h1>标题</h1>
        <img src="111.png">
        <p>价格：9999</p>
        <p>价格：9999</p>
    </div>
    <img class="img" src="">
    <script src="jquery-1.10.2.min.js"></script>
    <script src="html2canvas.min.js"></script>
    <script>
        $(function(){
            var w = $(".myImg").width();
            var h = $(".myImg").height();
            //要将 canvas 的宽高设置成容器宽高的 2 倍
            var canvas = document.createElement("canvas");
            canvas.width = w * 2;
            canvas.height = h * 2;
            canvas.style.width = w + "px";
            canvas.style.height = h + "px";
            var context = canvas.getContext("2d");
            //然后将画布缩放，将图像放大两倍画到画布上
            context.scale(2,2);

            $("#creat").click(function(){
                html2canvas($(".myImg"),{ // $(".myImg")是你要复制生成canvas的区域，可以自己选
                    onrendered:function(canvas){
                        dataURL =canvas.toDataURL("image/jpg");
                        $(".img").attr("src",dataURL)
                    }
                })
            })
        })
    </script>
</body>
</html>